<template>
    <div>
        <el-button @click="startProgressTask">开始任务</el-button>
        <el-progress :text-inside="true" :stroke-width="12" :percentage="roundedPercentage" v-if="showProgress"></el-progress>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            progress: 0,
            intervalId: null,
            showProgress: false,
            threshold: 12 // 进度条隐藏的阈值
        };
    },
    methods: {
        startProgressTask() {
            this.showProgress = true;
            this.progress = 0;
            this.intervalId = setInterval(() => {
                this.fetchProgress();
            }, 1000);
        },
        fetchProgress() {
            axios.get('http://localhost:8080/servers/progress')
              .then(response => {
                    this.progress = response.data;
                    console.log('当前进度:', this.progress);
                    if (this.progress >= this.threshold) {
                        clearInterval(this.intervalId);
                        setTimeout(() => {
                            this.showProgress = false;
                        },1000)
                    }
                })
              .catch(error => {
                    console.error('获取进度失败:', error);
                    clearInterval(this.intervalId);
                    this.showProgress = false;
                });
        }
    },
    computed: {
        roundedPercentage() {
            return Math.round(this.progress / 12 * 100);
        }
    },
    beforeDestroy() {
        if (this.intervalId) {
            clearInterval(this.intervalId);
        }
    }
};
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>